<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <%include("/WEB-INF/views/common/basejs.html"){}%>
    <link rel="stylesheet" href="${ctxPath!}/css/admin.css" media="all">
    <!--引入ztree相关资源-->
    <link rel="stylesheet" type="text/css" media="screen" href="${ctxPath!}/js/zTree_v3/css/metroStyle/metroStyle.css">
   <!-- <script type="text/javascript" src="${ctxPath!}/js/zTree_v3/js/jquery-1.4.4.min.js"></script>-->
    <script type="text/javascript" src="${ctxPath!}/js/zTree_v3/js/jquery.ztree.core.min.js"></script>
    <script type="text/javascript" src="${ctxPath!}/js/base/jquery-layout/jquery.layout.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="${ctxPath!}/js/base/jquery-layout/jquery.layout.css">
    <!--行级别工具栏模板-->
    <script type="text/html" id="rowTool">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="grant">分配</a>
            <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="resetPassword">重置密码</a>
        </div>
    </script>
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
            <button class="layui-btn layui-btn-sm" lay-event="delAll">删除</button>
        </div>
    </script>
    <script>
        var orgTree;
        var userTable;
        var userTableObj;
        var layer;
        var addPageIndex;//添加页面索引
        var editPageIndex;//编辑页面索引
        var grantPageIndex;//授权页面索引
        var tableId='userTable';
        var queryForm;
        layui.use(['table','layer','form'],function () {
            userTable = layui.table;
            layer=layui.layer;
            queryForm=layui.form;
            //查询表单点击查询事件
            queryForm.on('submit(queryForm)',function(data){
                /*var param=getCommonQueryData(data.field);*/
                var param=data.field;
                console.log(data.field);
                userTableObj.reload({
                    where: param
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                return false;
            });
            initLayout();
        });
        //初始化layout
        function initLayout(){
            $('body').layout({west__size:200});
            //左侧组织结构树
            initDeptTree();
            //初始化表格数据
            initTableData();
            //初始化表格监听事件
            initTableToolBar();
        }
        //初始化表格数据
        function initTableData(){
            userTableObj=userTable.render({
                elem:'#userTable'
                ,toolbar:'#toolbar'
                ,url:basePath+'/user/list'
                ,page:true
                ,cols:[[ //表头
                    {type:'checkbox',fixed:'left'}
                    ,{field: 'username',title:'账号'}
                    ,{field: 'realName',title:'姓名'}
                    ,{field: 'deptName',title:'所属部门'}
                    , {field: 'status', title:'用户状态',
                        templet:function(obj){
                            if(obj.status==1){
                                return '<span class="layui-btn layui-btn-sm layui-btn-normal">有效</span>';
                            }else{
                                return '<span class="layui-btn layui-btn-sm layui-btn-danger">冻结</span>';
                            }
                        }
                    }
                    ,{fixed:'right',title:'操作', align:'center',toolbar:'#rowTool',width:'30%'}
                ]]
            });
        }
        //监听行级表格工具栏事件
        function initTableToolBar(){
            //行级别数据操作监听
            userTable.on('tool(toolbar)',function(obj){
                var id=obj.data.id;
                switch(obj.event){
                    case 'resetPassword':
                        resetPsd(id);
                        break;
                    case 'delete':
                        del(obj);
                        break;
                    case 'update':
                        editPage(id);
                        break;
                    case 'grant':
                        grantPage(id);
                };
            });
            //表级别数据操作监听
            userTable.on('toolbar(toolbar)',function(obj){
                switch(obj.event){
                    case 'add':
                        addPage();
                        break;
                    case 'delAll':
                        layer.msg('删除所有');
                        break;
                };
            });
        }
        //初始化左侧菜单树
        function initDeptTree(){
            //查询有效的部门
            var conditions=[];
            var param={};
            param.columnName="status";
            param.value="1";
            conditions.push(param);
            var setting = {
                //简单的数据list
                data:{
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pid",
                        rootPId: null
                    },
                    key:{ name:"deptName" ,value:"id" }
                },
                view: {
                    showLine: false
                },
                async: {
                    enable: true,
                    type: 'post',
                    url: basePath + "/dept/getList",
                    otherParam: { "conditions":JSON.stringify(conditions)}
                },
                callback: {
                    onClick: function (event, treeId, treeNode) {
                        console.log(treeNode);
                    },
                    onAsyncSuccess: function(){//默认展开所有节点
                        orgTree.expandAll(true);
                    }
                }
            };
          orgTree=$.fn.zTree.init($("#deptTree"),setting);
        }
        //重置密码
        function resetPsd(id){
            layer.confirm("确定要重置用户密码?", {icon: 3, title:'提示'},
                function(index){//确定回调
                    $.ajax({
                        url:basePath+'/user/resetUserPassword',
                        type:'post',
                        data:{userId:id},
                        dataType:'json',
                        success:function(data){
                            layer.close(index);
                            if(data.code==0){
                                layer.msg(data.msg,{
                                    icon: 1
                                });
                            }else{
                                layer.msg(data.msg,{
                                    icon: 2
                                });
                            }
                        },
                        error:function(){
                            layer.close(index);
                            layer.msg("重置密码失败",{
                                icon: 2
                            });
                        }
                    });
                    console.log(obj);

                },function (index) {//取消回调
                    layer.close(index);
                }
            );
        }
        //删除用户
        function del(obj){
            layer.confirm("你确定删除数据吗?", {icon: 3, title:'提示'},
                function(index){//确定回调
                    $.ajax({
                        url:basePath+'/user/delete',
                        type:'post',
                        data:{ids:obj.data.id},
                        dataType:'json',
                        success:function(data){
                            if(data.code==0){
                                obj.del();
                            }
                            layer.close(index);
                            layer.msg(data.msg);
                        },
                        error:function(){
                            layer.close(index);
                            layer.msg("删除节点失败,系统内部错误");
                        }
                    });
                    console.log(obj);

                },function (index) {//取消回调
                    layer.close(index);
                }
            );
        }
        //弹出新增资源页面
        function addPage(){
            addPageIndex=layer.open({
                title:'用户添加',
                type: 2,
                content:basePath+'/user/addPage',
                area: ['600px', '400px'],
                maxmin:true,
                btn: ['添加', '取消']
                ,yes: function(index, layero){
                    var submit = layero.find('iframe').contents().find("#form-submit");
                    submit.click();
                }
            });
        }
        function editPage(id){
            editPageIndex=layer.open({
                title:'用户编辑',
                type: 2,
                content:basePath+'/user/editPage?id='+id,
                area: ['600px', '400px'],
                maxmin:true,
                btn: ['编辑', '取消']
                ,yes: function(index, layero){
                    var submit = layero.find('iframe').contents().find("#form-submit");
                    submit.click();
                }
            })
        }
        //用户授权界面
        function grantPage(id){
            grantPageIndex=layer.open({
                title:'用户授权',
                type: 2,
                content:basePath+'/user/grantPage?id='+id,
                area: ['600px', '400px'],
                maxmin:true,
                btn: ['授权', '取消']
                ,yes: function(index, layero){
                    var submit = layero.find('iframe').contents().find("#form-submit");
                    submit.click();
                }
            })
        }
        //表格重新加载
        function query(){
            userTable.reload(tableId);
        }
        //关闭添加页面
        function closeAddPage(){
            layer.close(addPageIndex);
        }
        //关闭编辑页面
        function closeEditPage(){
            layer.close(editPageIndex);
        }
        //关闭授权页面
        function closeGrantPage(){
            layer.close(grantPageIndex);
        }
    </script>
</head>
<body class="layui-layout-body">
    <!--组织结构导航-->
    <div class="ui-layout-west">
        <div class="layui-card" style="height:100%;">
            <div class="layui-card-header">
                <span class="layui-word-aux	">组织结构</span>
            </div>
            <div class="layui-card-body">
                <ul id="deptTree" class="ztree">

                </ul>
            </div>
        </div>
    </div>
    <!--数据展示区-->
    <div class="ui-layout-center">
        <div class="layui-fluid">
            <div class="layui-card">
                <!--查询form区域-->
                <form id="queryForm" class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">账号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input" operator="like">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit="" lay-filter="queryForm">查询</button>
                            <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                        </div>
                    </div>
                </form>
                <!--内容区域-->
                <div class="layui-card-body">
                    <table id="userTable" lay-filter="toolbar"></table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>